<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8">
		<title>产品列表</title>
		<!--引入Elementui组件-->
		<!-- 引入样式-->
		<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/theme-chalk/index.min.css">
		<!-- 引入组件库 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/index.min.js"></script>
		<link rel="stylesheet" href="/layui/css/layui.css" />
		<script type="text/javascript" src="/layui/layui.js" ></script>
		<script type="text/javascript" src="/js/jquery-3.3.1.min.js" ></script>
		<link rel="stylesheet" href="/css/index.css" />
		<style>
				/*二级导航*/
				.my-list-ejdh{
					border: 1px solid #E5E5E5;
					height: 120px;
					top: 20px;
				}
				/*二级导航下的分类*/
				.my-list-ejdh-a{
					display: block;
					float: left;
					width: 80px;
					height: 25px;
					text-align: center;
					line-height: 25px;
					margin: 5px 5px;
				}
				.my-list-ejdh a:hover{
					color: #FF4400;
				}
				/*排序*/
				.my-list-paixu{
					border: 1px solid #E5E5E5;
					height: 50px;
					background-color: #fff;
					margin-top: 30px;
				}
				.my-list-paixu-a{
					display: block;
					width: 100px;
					height: 50px;
					text-align: center;
					line-height: 50px;
					font-size: 14px;
					float: left;
				}
				.my-list-paixu-b{
					display: block;
					width: 100px;
					height: 50px;
					text-align: center;
					line-height: 50px;
					font-size: 14px;
					float: left;
					background-color: #FF4400;
					color: #fff;
				}
				.my-list-paixu-a:hover{
					background-color: #FF4400;
					color: #fff;
				}
				.pageClassFather {
					/*background-color: pink;*/
					height: 100px;
					width: 1170px;
				}
				.pageClass {
					/*background-color: green;*/
					width: 700px;
					height: 50px;
					margin-top: 50px;
					margin-left: 235px;
				}
			</style>
		<script>
			$(function(){
				//纵向导航列表的二级导航的显示和隐藏
				$(".my-daohang2 li").mouseenter(function(){
					$(".my-daohang2-2").show();
				});
				$(".my-daohang2 li").mouseleave(function(){
					$(".my-daohang2-2").hide();
				});
				$(".my-daohang2-2").mouseenter(function(){
					$(this).show();
				});
				$(".my-daohang2-2").mouseleave(function(){
					$(this).hide();
				});

				//轮播下方促销图片的悬停事件
				$(".my-cximg").mouseenter(function(){
					$(this).css({"border-color":"#FF5722"});
				});
				$(".my-cximg").mouseleave(function(){
					$(this).css({"border-color":"#FFF"});
				});

				//回到顶部按钮
				$("#my-backtop").click(function(){
					$("html,body").animate({
						 scrollTop: 0
					},500);
				});

				//鼠标滚动事件，显式回到顶部按钮
			});
		</script>
	</head>


	<body>

		<!-- 引入头部 -->
		<div>
			<iframe src="/header" scrolling="no" style="height:180px;width: 100%;border: 0px;"></iframe>
		</div>
		<!--引入头部end-->

		<div class="my-index-body">
			<!--横向导航栏-->
			<div class="my-daohang1">
				<div class="layui-container">
					<div class="layui-row">
						<!--菜单-->
						<div class="layui-col-md9" style="height: 50px;">
							<a href="/index">首页</a>
							<a href="">优抢购</a>
							<a href="">聚划算</a>
							<a href="">大转盘</a>
							<a href="">会员折扣</a>
							<a href="">买家秀</a>
						</div>
					</div>
				</div>
			</div>

			<!--横向导航end-->


			<!--促销活动部分-->
			<div class="my-cuxiaodiv">

			</div>
			<!--促销活动部分end-->

			<!-- 二级导航部分 -->
			<div class="my-list-ejdh layui-container">
				<p>
					<strong class="my-list-ejdh-a">分类：</strong>
					<a th:each="Catalog : ${catalogs}" th:href="'/goodsList/'+${Catalog.catalog}+'/1'" href="" class="my-list-ejdh-a" th:text="${Catalog.catalog}">风衣</a>
				</p>
			</div>
			<!--排序-->
			<div class="my-list-paixu layui-container">
				<a href="" class="my-list-paixu-a">按销量</a>
				<a href="" class="my-list-paixu-a">按评分</a>
				<a href="" class="my-list-paixu-a">价格升序</a>
				<a href="" class="my-list-paixu-a">价格降序</a>
			</div>
			<!--二级导航部分end-->

			<!--商品展示部分-->
			<div class="layui-container my-goods" style="border-radius: 0px;top: 10px;">
				<!--商品列表-->
				<div class="my-goods-list layui-row">
					<div th:each="goods : ${goodsListPage.list}" class="goods-mess layui-col-md3">
						<!--产品图片-->
						<div class="goods-img">
							<a th:href="'/goodsMess/'+${goods.id}" href="/goodsMess.html">
								<img th:src="${goods.pic}" src="/img/02.jpg" />
							</a>
						</div>
						<!--产品价格-->
						<p class="goods-price" th:text="'￥'+${goods.price}">￥1399.99</p>
						<!--产品销量-->
						<p class="goods-sellnum" th:text="'月销：'+${goods.number}+'笔'">月销：1000笔</p>
						<!--产品标题-->
						<p class="goods-biaoti">
							<a th:href="'/goodsMess/'+${goods.id}" href="/goodsMess.html" th:text="${goods.name}">
								秋季新款小白鞋子男帆布运动鞋韩版白色休闲鞋百搭潮流板鞋男鞋潮
							</a>
						</p>
					</div>



				</div>
			<!--商品展示部分end-->

				<div th:if="${goodsListPage.total == 0}" class="pageClassFather">
					<div class="pageClass">
						<h1>这个商品好像不存在哦</h1>
					</div>
				</div>

			<!-- 分页 -->
				<div th:if="${goodsListPage.total != 0}" class="pageClassFather">
					<div class="pageClass">

						<a th:href="'/goodsList/'+${catalog}+'/1'" href=""
						   class="my-list-paixu-a" style="text-align: center">首页</a>

						<a th:if="${goodsListPage.hasPreviousPage}"
						   th:href="'/goodsList/'+${catalog}+'/'+${goodsListPage.pageNum -1}" href=""
						   class="my-list-paixu-a" style="text-align: center">上一页</a>

						<a th:if="${goodsListPage.hasPreviousPage}"
						   th:href="'/goodsList/'+${catalog}+'/'+${goodsListPage.pageNum -1}" href=""
						   class="my-list-paixu-a" style="text-align: center"
						   th:text="${goodsListPage.pageNum -1}">1</a>

						<a th:href="'/goodsList/'+${catalog}+'/'+${goodsListPage.pageNum}" href=""
						   class="my-list-paixu-b" style="text-align: center"
						   th:text="${goodsListPage.pageNum}">2</a>

						<a th:if="${goodsListPage.hasNextPage}"
						   th:href="'/goodsList/'+${catalog}+'/'+${goodsListPage.pageNum+1}"
						   href="" class="my-list-paixu-a"
						   style="text-align: center"
						   th:text="${goodsListPage.pageNum+1}">3</a>

						<a th:if="${goodsListPage.hasNextPage}"
						   th:href="'/goodsList/'+${catalog}+'/'+${goodsListPage.pageNum+1}" href=""
						   class="my-list-paixu-a" style="text-align: center">下一页</a>

						<a th:href="'/goodsList/'+${catalog}+'/'+${goodsListPage.pages}" href=""
						   class="my-list-paixu-a" style="text-align: center">尾页</a>

					</div>
				</div>

			<!-- 分页end -->

			<!--引入底部-->

			<!--引入底部end-->

			<!--回到顶部按钮-->
			<div id="my-backtop">
				<span class="layui-icon layui-icon-up"></span>
			</div>

		</div>
			<div class="my-footer">
				<iframe src="/footer.html" scrolling="no" style="border: 0px;width: 100%;height: 291px;"></iframe>
			</div>

		</div>



	</body>
	<script>
		layui.use(['element','carousel','laypage'], function(){
  			var element = layui.element;
  			var carousel = layui.carousel;
  			var laypage = layui.laypage;

			  //执行一个laypage实例
			  laypage.render({
			    elem: 'test1'
			    ,count: 100
			    ,theme: '#FF5722'
			  });

			  //建造实例
			  carousel.render({
			    elem: '#test1'
			    ,width: '100%' //设置容器宽度
			    ,arrow: 'always' //始终显示箭头
			    //,anim: 'updown' //切换动画方式
			  });
		});
	</script>
</html>
